<template>
  <div>
    <leftRightSplit :left-span="4">
      <template #left>
        <ContentWrap title="所在公司部门">
          <template #extr>
            <el-checkbox v-model="isShowChildren">显示子公司</el-checkbox>
          </template>
          <unitDeptTree
            ref="deptTree"
            :isSubCompany="isShowChildren"
            @load="chioseDept"
            @change="chioseDept"
          />
        </ContentWrap>
      </template>
      <template #right>
        <ContentWrap :title="title">
          <div class="app-container">
            <Search
              ref="search"
              :schema="searchScheme"
              :model="queryParam"
              :is-col="false"
              layout="inline"
              :showSearch="true"
              button-position="left"
              :search-loading="loading"
              :reset-loading="loading"
              @search="handleSearch"
              @reset="handleSearch"
            >
              <template #opts>
                <el-button type="success" v-hasPermi="'add'" @click="addEmp">添加员工</el-button>
              </template>
            </Search>
          </div>
          <Table
            :data="emps"
            :columns="columns"
            :loading="loading"
            row-key="EmpId"
            v-model:selectKey="chioseEmp"
            :check-is-select="checkIsSelect"
            :pagination="paging"
            :is-select="$hasPermi('open.account')"
            :is-multiple="true"
            @selected="selected"
            @change="loadEmp"
          >
            <template #title>
              <div v-if="chioseEmp.length > 0" v-hasPermi="'open.account'">
                <span style="margin-right: 10px">已选择:{{ chioseEmp.length }}</span>
                <el-button
                  :disabled="chioseEmp.length == 0"
                  type="primary"
                  size="small"
                  @click="openAccount"
                  >开通账号</el-button
                >
              </div>
            </template>
            <template #empBase="e">
              <div class="userInfo">
                <div class="head">
                  <img
                    v-if="e.row.UserHead == null || e.row.UserHead == ''"
                    src="@/assets/imgs/avatar.png"
                    width="50"
                    height="50"
                  />
                  <el-avatar
                    v-else
                    shape="square"
                    :size="50"
                    :src="$formatFileUri(e.row.UserHead)"
                  />
                </div>
                <div class="content">
                  <div class="item">
                    <Icon v-if="e.row.Sex == 1" style="color: #409eff" icon="ep:male" />
                    <Icon v-else-if="e.row.Sex == 2" style="color: #f56c6c" icon="ep:female" />
                    <el-link @click="showEmp(e.row)">{{ e.row.EmpName }}</el-link>
                  </div>
                  <div class="empNo">{{ e.row.EmpNo }}</div>
                </div>
              </div>
            </template>
            <template #empPost="e">
              <template v-if="e.row.EntryPost">
                {{ e.row.EntryPost.Name }}
                <el-tooltip
                  v-if="e.row.Post && e.row.Post.length > 0"
                  effect="dark"
                  placement="bottom"
                >
                  <template #content>
                    <div>
                      <p v-for="(t, index) in e.row.Post" :key="index">
                        {{ t.Show }}
                      </p>
                    </div>
                  </template>
                  <Icon icon="ep:more" />
                </el-tooltip>
              </template>
              <template v-else-if="e.row.Post && e.row.Post.length > 0">
                {{ e.row.Post[0].Show }}
                <el-tooltip v-if="e.row.Post.length > 1" effect="dark" placement="bottom">
                  <template #content>
                    <div>
                      <p v-for="(t, index) in e.row.Post" :key="index">
                        {{ t.Show }}
                      </p>
                    </div>
                  </template>
                  <Icon icon="ep:more" />
                </el-tooltip>
              </template>
              <BaseButton
                size="small"
                type="default"
                title="编辑人员岗位"
                style="float: right"
                :icon="editIcon"
                circle
                @click="editEmpPost(e.row.EmpId)"
              />
            </template>
            <template #empTitle="e">
              <template v-if="e.row.EntryTitle">
                {{ e.row.EntryTitle.Name }}
                <el-tooltip
                  v-if="e.row.Title && e.row.Title.length > 0"
                  effect="dark"
                  placement="bottom"
                >
                  <template #content>
                    <div>
                      <p v-for="(t, index) in e.row.Title" :key="index">
                        {{ t.Show }}
                      </p>
                    </div>
                  </template>
                  <Icon icon="ep:more" />
                </el-tooltip>
              </template>
              <template v-else-if="e.row.Title && e.row.Title.length > 0">
                {{ e.row.Title[0].Show }}
                <el-tooltip v-if="e.row.Title.length > 1" effect="dark" placement="bottom">
                  <template #content>
                    <div>
                      <p v-for="(t, index) in e.row.Title" :key="index">
                        {{ t.Show }}
                      </p>
                    </div>
                  </template>
                  <Icon icon="ep:more" />
                </el-tooltip>
              </template>
              <BaseButton
                size="small"
                type="default"
                title="编辑人员职务"
                style="float: right"
                :icon="editIcon"
                circle
                @click="editEmpTitle(e.row.EmpId)"
              />
            </template>
            <template #status="e">
              <el-switch
                v-model="e.row.Status"
                :disabled="$hasPermi('set') == false"
                :inactive-value="2"
                :active-value="1"
                @change="(val) => setStatus(e.row, val)"
              />
            </template>
            <template #birthday="e">
              {{ e.row.Birthday ? $formatTime(e.row.Birthday, 'yyyy-MM-dd') : null }}
            </template>
            <template #regTime="e">
              {{ $formatTime(e.row.RegTime, 'yyyy-MM-dd') }}
            </template>
            <template #userType="e">
              {{ HrUserType[e.row.UserType].text }}
            </template>
            <template #isOpenAccount="e">
              <el-tag v-if="e.row.IsOpenAccount == false">未开通</el-tag>
              <el-tag v-else type="success">已开通</el-tag>
            </template>
            <template #action="e">
              <BaseButton
                v-hasPermi="'set'"
                v-if="comId == e.row.CompanyId"
                size="small"
                type="primary"
                title="编辑人员资料"
                :icon="editIcon"
                circle
                @click="editEmp(e.row.EmpId)"
              />
              <BaseButton
                v-hasPermi="'entry'"
                v-if="e.row.Status == 1"
                size="small"
                type="default"
                title="人员调任"
                :icon="shareIcon"
                circle
                @click="empEntry(e.row)"
              />
              <BaseButton
                v-hasPermi="'delete'"
                v-if="e.row.Status == 0 && comId == e.row.CompanyId"
                size="small"
                type="danger"
                title="删除员工"
                :icon="dropIcon"
                circle
                @click="dropEmp(e.row)"
              />
            </template>
          </Table>
        </ContentWrap>
      </template>
    </leftRightSplit>
    <empPostList :emp-id="empId" v-model:visible="postVisible" @cancel="refresh" />
    <empTitleList :emp-id="empId" v-model:visible="visible" @cancel="refresh" />
    <editEmpEntry
      :emp="emp"
      :company-id="queryParam.CompanyId"
      v-model:visible="entryVisible"
      @close="refresh"
    />
  </div>
</template>
<script>
import { unitDeptTree } from '@/components/unit/'
import { useUserStoreWithOut } from '@/store/modules/user'
import { Table } from '@/components/Table/'
import { HrItemDic, HrUserType, HrEnumDic } from '@/config/publicDic'
import { Search } from '@/components/Search'
import * as empApi from '@/api/emp/emp'
import { open } from '@/api/emp/loginUser'
import { useIcon } from '@/hooks/web/useIcon'
import empPostList from '../empPost/empPostList.vue'
import empTitleList from '../empTitle/empTitleList.vue'
import editEmpEntry from './components/editEmpEntry.vue'
import { watch } from 'vue'
const userStore = useUserStoreWithOut()
export default {
  components: {
    unitDeptTree,
    Search,
    Table,
    empPostList,
    empTitleList,
    editEmpEntry
  },
  data() {
    return {
      HrUserType,
      paging: {
        pageSize: 10,
        total: 0,
        currentPage: 1
      },
      entryVisible: false,
      emps: null,
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      shareIcon: useIcon({ icon: 'ep:share' }),
      isShowChildren: false,
      loading: false,
      title: null,
      empId: null,
      emp: null,
      postVisible: false,
      chioseEmp: [],
      visible: false,
      searchScheme: [
        {
          field: 'QueryKey',
          label: '关键字',
          component: 'Input',
          componentProps: {
            placeholder: '人员名/编号/手机号'
          }
        },
        {
          field: 'Post',
          label: '岗位',
          component: 'TreeDicItem',
          componentProps: {
            multiple: true,
            dicId: HrItemDic.post,
            placeholder: '人员岗位'
          }
        },
        {
          field: 'Title',
          label: '职务',
          component: 'DicItem',
          componentProps: {
            multiple: true,
            dicId: HrItemDic.title,
            placeholder: '人员职务'
          }
        },
        {
          field: 'UserType',
          label: '员工类型',
          component: 'EnumItem',
          componentProps: {
            multiple: true,
            dicKey: HrEnumDic.hrUserType,
            placeholder: '员工类型'
          }
        },
        {
          field: 'IsNoOpen',
          component: 'Switch',
          componentProps: {
            activeText: '未开通账号',
            inactiveText: '已开通账号'
          }
        },
        {
          field: 'IsEntry',
          component: 'Switch',
          componentProps: {
            activeText: '显示入职员工',
            inactiveText: '显示本公司员工'
          }
        }
      ],
      queryParam: {
        CompanyId: null,
        QueryKey: null,
        IsEntry: false,
        DeptId: null,
        UnitId: null,
        Status: null,
        UserType: null,
        Post: null,
        Title: null
      },
      columns: [
        {
          field: 'EmpNo',
          label: '人员信息',
          align: 'left',
          fixed: 'left',
          sortable: true,
          slotName: 'empBase',
          minWidth: '210px',
          sortable: 'custom'
        },
        {
          field: 'Dept',
          label: '单位部门',
          align: 'left',
          sortable: true,
          minWidth: 120,
          sortby: 'DeptId',
          sortable: 'custom'
        },
        {
          field: 'Post',
          label: '岗位',
          align: 'center',
          slotName: 'empPost',
          minWidth: 150
        },
        {
          field: 'DeptTitle',
          label: '职务',
          align: 'center',
          slotName: 'empTitle',
          minWidth: 150
        },
        {
          field: 'Status',
          label: '用户状态',
          align: 'center',
          slotName: 'status',
          minWidth: 105,
          sortable: 'custom'
        },
        {
          field: 'Phone',
          label: '手机号',
          align: 'center',
          width: 110,
          sortable: 'custom'
        },
        {
          field: 'Birthday',
          label: '生日',
          align: 'center',
          slotName: 'birthday',
          sortable: 'custom',
          minWidth: 100
        },
        {
          field: 'UserType',
          label: '人员类型',
          align: 'center',
          sortable: 'custom',
          slotName: 'userType',
          minWidth: 110
        },
        {
          field: 'RegTime',
          label: '注册日期',
          align: 'center',
          slotName: 'regTime',
          sortable: 'custom',
          minWidth: 110
        },
        {
          field: 'IsOpenAccount',
          label: '是否开通账号',
          align: 'center',
          slotName: 'isOpenAccount',
          sortable: 'custom',
          fixed: 'right',
          minWidth: 130
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          fixed: 'right',
          width: '120px',
          slotName: 'action'
        }
      ]
    }
  },
  computed: {
    comId() {
      return userStore.comId
    }
  },
  mounted() {},
  methods: {
    handleSearch(data) {
      this.queryParam = Object.assign(this.queryParam, data)
      this.loadEmp()
    },
    refresh(isRefresh) {
      if (isRefresh) {
        this.loadEmp()
      }
    },
    empEntry(row) {
      this.emp = {
        CompanyId: this.queryParam.CompanyId,
        EmpId: row.EmpId,
        EmpName: row.EmpName
      }
      this.entryVisible = true
    },
    addEmp() {
      this.$router.push({ name: 'addEmp' })
    },
    selected(keys) {
      const t = new Set(keys)
      this.chioseEmp = this.chioseEmp.filter((a) => t.has(a))
    },
    async openAccount() {
      if (this.chioseEmp.length === 0) {
        return
      }
      await open(this.queryParam.CompanyId, this.chioseEmp)
      this.$message({
        type: 'success',
        message: '开通成功!'
      })
      this.chioseEmp = []
      this.loadEmp()
    },
    showEmp(row) {
      this.$router.push({ name: 'showEmp', params: { id: row.EmpId } })
    },
    editEmp(id) {
      this.$router.push({
        name: 'editEmp',
        params: {
          id: id
        }
      })
    },
    async setStatus(row, status) {
      await empApi.setStatus(row.EmpId, status)
      row.Status = status
      if (status !== 1 && this.chioseEmp.length > 0) {
        this.chioseEmp = this.chioseEmp.filter((c) => c !== row.EmpId)
      }
    },
    checkIsSelect(row) {
      return row.IsOpenAccount === false && row.Status === 1 && row.DeptId !== 0
    },
    dropEmp(emp) {
      const title = '确认删除员工 ' + emp.EmpName + '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDrop(emp.EmpId)
      })
    },
    async submitDrop(id) {
      await empApi.deleteEmp(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.chioseEmp = []
      this.loadEmp()
    },
    editEmpTitle(empId) {
      this.empId = empId
      this.visible = true
    },
    editEmpPost(empId) {
      this.empId = empId
      this.postVisible = true
    },
    chioseDept(vals, e) {
      this.queryParam.CompanyId = e.companyId
      if (e.value.length === 0) {
        this.queryParam.UnitId = null
        this.queryParam.DeptId = null
        this.title = e.comName[e.companyId] + '公司-人员列表'
      } else {
        const dept = e.value[0]
        if (dept.type === 'unit') {
          this.title = dept.Name + '单位-人员列表'
          this.queryParam.UnitId = [dept.Id]
          this.queryParam.DeptId = null
        } else {
          this.title = dept.Name + '部门-人员列表'
          this.queryParam.UnitId = null
          this.queryParam.DeptId = [dept.Id]
        }
      }
      this.loadEmp()
    },
    async loadEmp(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'EmpId',
          IsDesc: true
        }
        this.paging.currentPage = 1
      }
      if (this.queryParam.IsNoOpen === false) {
        this.queryParam.IsNoOpen = null
      }
      const res = await empApi.queryEmp(this.queryParam, curPaging)
      if (res.List) {
        this.emps = res.List
      } else {
        this.emps = []
      }
      this.paging.total = res.Count
    }
  }
}
</script>
